<template>
  <view class="px-3 pt-3">
    <view class="text-right">
      <text class="border-1 border-solid border-#999999 text-xs p-1 rounded"
            @click="goPage('/pages_sub/balance/refundList')">退款记录
      </text>
    </view>
    <view class=" rounded p-4 mt-4 bg" style="color: white">
      <view class="text-lg font-bold text-white">储值卡</view>
      <view class="px-6 mt-4 pb-4">
        <u-divider bg-color="transparent" color="white" border-color="white">
          <text>账户余额（元）</text>
        </u-divider>
        <view class="text-center text-lg text-white mt-2">9999.99</view>
      </view>
    </view>
    <view class=" mt-4">

      <u-form   label-width="auto">
        <view>
          <view class="title">退款金额</view>
          <view class="flex items-center" style="margin-top: 42rpx">
            <text style="font-size: 40rpx;margin: 0 17rpx">¥</text>
            <u-input :custom-style="{background:'#EEEEEE',color:'#666666',padding:'10rpx',fontSize:'40rpx',borderRadius:'10rpx'}" v-model="price" placeholder="请输入金额" @input="gridIndex=null"/>
            <text style="font-size: 40rpx;margin: 0 17rpx">全部退还</text>
          </view>
        </view>
      </u-form>

    </view>
    <view style="font-size: 30rpx;margin-top: 42rpx">可退款金额¥99999</view>
    <view class="wx">

      <view class="left">
        <u-icon name="/static/image/wechat.png" size="50rpx"></u-icon>

        <text style="font-size: 30rpx">退款至微信</text>
      </view>

      <u-icon name="checkmark-circle-fill" color="#0069E4" size="43rpx"></u-icon>
    </view>


    <view class=" bottom-0 w-full bg-white p-2">
      <view class=" safeButton">
        <u-button type="primary" hover-class="none" shape="circle"
                  :custom-style="{ background: theme.bgColor, color: theme.color,display:'block',width:'400rpx'}" @click="submit">立即退款
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      money: ''
    }
  },
  methods: {}
}
</script>

<style lang="scss">
page {
  background-color: white;
}
.bg{
  background-image: linear-gradient(to bottom, #5944ec, #08b8fd);
}
.wx {
  margin: 32rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    align-items: center;

    text {
      padding-left: 16rpx;
    }
  }
}
.title {
  font-size: 30rpx;
  font-weight: bold;
  margin-top: 60rpx;
}
</style>
